<template>
	<div class="websiteIntermodalTransportation">
		<!-- 头部导航开始 -->
		<HomeHeader></HomeHeader>
		<!-- 头部导航结束 -->
		<!-- 主体部分开始 -->
		<section class="aiseo-websiteIntermodalTransportation-main">
			<seoBanner bgUrl="https://oss-imag.aiseoword.com/aiseo-image/img-tab06-bannerIMG.webp" title="网站联运"
				subTitle="品牌营销 从这里开始" :listArr="['精准营销', '智能高效', '全网投放']" chatInfo="您好, 我想了解更多关于网站联运的内容"
				buttonText="联运咨询"></seoBanner>
			<div class="textBox">
				<div class="textBoxTittle">
					<div style="justify-content: left;">
						<img src="@/assets/image/transport/img／tab06／title／obstacle@2x.png" alt=""
							style="width: 248px;height:88px;object-fit:cover;" />
					</div>
					<div class="flex"
						style="font-size: 20px;text-align: left;width:1000px;flex-wrap: wrap;margin-top: 40px;color: #808080;text-align: center; font-family: Alibaba PuHuiTi-Regular; letter-spacing: 0.7px;">
						网站联运的难题主要体现在如何高效整合各方资源、实现无缝对接与协同合作，以确保各方利益最大化，同时应对技术、市场和竞争等多方面的挑战。这需要具备全面的战略规划、强大的执行力和灵活的应变能力。
					</div>
					<div class="image-list mt-40">
						<div class="bosdwer">
							<img src="@/assets/image/transport/tab06／obstacleCard／A@2x.png" alt="" style="" />
						</div>
						<div class="bosdwer">
							<img src="@/assets/image/transport/tab06／obstacleCard／B@2x.png" alt="" style="" />
						</div>
						<div class="bosdwer">
							<img src="@/assets/image/transport/tab06／obstacleCard／C@2x.png" alt="" style="" />
						</div>
						<div class="bosdwer">
							<img src="@/assets/image/transport/tab06／obstacleCard／D@2x.png" alt="" style="" />
						</div>
					</div>
					<div class="end-img">
						<img src="@/assets/image/situation.png" alt="" />
					</div>
					<div class="flex justify-content align mt-16">
						<div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave"
							style="position: relative; width: 1200px; height: 300px; overflow: hidden;">
							<img ref="image" src="@/assets/lottie/homePage/lottie.png" alt=""
								style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;transform: scale(.828);" />
							<div ref="lottieContainer"
								style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
							</div>
							<div ref="clickableBox" @click="handleOpenChat"
								style="position: absolute; bottom:55px; right:160px; width: 94px; height: 46px; cursor: pointer;">
							</div>
						</div>
					</div>
					<div style="justify-content: left;margin-top: 158px;">
						<img src="@/assets/image/SEOcustomer/img／common／title／advantages@2x.png" alt=""
							style="width:184px;height:88px;object-fit: cover;" />
					</div>
					<div class="flex"
						style="font-size: 20px;text-align: left;width:1000px;flex-wrap: wrap;margin-top: 32px;color: #808080;text-align: center; font-family: Alibaba PuHuiTi-Regular;letter-spacing: 0.7px;">
						选择我们进行网站联运，您将享受到一站式的高效解决方案。我们具备丰富的行业经验和专业的技术团队，能够全面整合各方资源，实现无缝对接与协同合作，帮助您实现利益最大化。选择我们，让您的网站联运之路更加顺畅、高效！
					</div>
				</div>
			</div>
			<div class="simple">
				<div class="swipper-content">
					<div class="swipper-left-mask"></div>
					<div class="swipper-handle">
						<div class="swipper-left-arrow swipper-arrow" @click="changeSwipper('left')">
							<el-icon>
								<ArrowLeftBold />
							</el-icon>
						</div>
						<div class="swipper-right-arrow swipper-arrow" @click="changeSwipper('right')">
							<el-icon>
								<ArrowRightBold />
							</el-icon>
						</div>
					</div>
					<div class="swipper-item-outer" ref="swipperRef" style="left: -160px">
						<div class="swipper-item" v-for="(item, index) in carouselList" :key="index">
							<div class="logo-img">
								<img class="logo-images" :src="item.img" alt="" style="width: 100%;height: 100%;" />
								<div @click="handleOpenChat" class="button-outer">
									<el-button class="learn-more">了解更多</el-button>
								</div>
							</div>
							<img class="swipper-title-img mt-36" :src="item.titleImg" alt="" />
							<h3>{{ item.title }}</h3>
							<p class="swipper-item-disc">{{ item.disc }}</p>
						</div>
					</div>
					<div class="swipper-right-mask"></div>
				</div>
			</div>
			<div class="flex justify-content" style="width:100%;height:80px;">
				<img src="@/assets/image/situation.png" alt="" style="width:1200px;height:100%;object-fit: cover;" />
			</div>
			<EndButton></EndButton>
		</section>
		<!-- 主体部分结束 -->
		<!-- 底部开始 -->
		<HomeFooter></HomeFooter>
		<!-- 底部结束 -->
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onBeforeUnmount
	} from 'vue';
	import EndButton from "@/components/common/views/EndButton.vue";
	import HomeHeader from "@/components/homePage/header/index.vue";
	import HomeFooter from "@/components/homePage/footer/index.vue";
	import seoBanner from "@/components/seoCustomer/banner/index.vue";
	import lottie from 'lottie-web';
	import animationData from '@/assets/lottie/homePage/tab06_1080P.json';
	import {
		ArrowRight
	} from "@element-plus/icons-vue";
	import EventBus from "@/utils/eventBus.js";
	const handleOpenChat = () => {
		EventBus.emit("openCustomerChat", {
			message: '您好, 我想了解更多关于网站联运的内容',
		});
	};
	import {
		ArrowLeftBold,
		ArrowRightBold
	} from "@element-plus/icons-vue";
	import img1 from "@/assets/image/transport/Combined1.webp";
	import img2 from "@/assets/image/transport/Combined2.webp";
	import img3 from "@/assets/image/transport/Combined3.webp";
	import img4 from "@/assets/image/transport/Combined4.webp";
	import img5 from "@/assets/image/transport/Combined5.webp";
	import titleImg1 from "@/assets/image/transport/img／tab06／chooseUsCard／text／analyze@2x.png";
	import titleImg2 from '@/assets/image/transport/img／tab06／chooseUsCard／text／coordinate@2x.png';
	import titleImg3 from '@/assets/image/transport/img／tab06／chooseUsCard／text／manage@2x.png';
	import titleImg4 from '@/assets/image/transport/img／tab06／chooseUsCard／text／optimize@2x.png';
	import titleImg5 from '@/assets/image/transport/img／tab06／chooseUsCard／text／support@2x.png';
	import swipperTitle1 from '@/assets/image/transport/swipperTitle1.png';
	import swipperTitle2 from '@/assets/image/transport/swipperTitle2.png';
	import swipperTitle3 from '@/assets/image/transport/swipperTitle3.png';
	import swipperTitle4 from '@/assets/image/transport/swipperTitle4.png';
	import swipperTitle5 from '@/assets/image/transport/swipperTitle5.png';

onBeforeUnmount(()=>{
	if (animationInstance) {
		animationInstance.destroy(); // 销毁动画实例
	}
})
	onMounted(() => {
		const element = document.getElementById("app");
		element.scrollTop = 0
	})
	const getUrl = (url) => {
		return new URL(url, import.meta.url).href;
	};
	const carouselList = ref([{
			img: img5,
			titleImg: swipperTitle1,
			title: "技术支持服务",
			disc: "能够对各种类型的网站进行技术支持和维护,包括网站开发、服务器管理、数据库管理等方面的技术能力.",
		},
		{
			img: img3,
			titleImg: swipperTitle2,
			title: "内容管理服务",
			disc: "整站优化以进入搜索引擎首页或前三名的关键词数量和整体目标搜索量为依据,根据约定的关键词数量或网站权重进行考核.",
		},
		{
			img: img4,
			titleImg: swipperTitle3,
			title: "SEO优化服务",
			disc: "熟悉SEO的原理和技巧,能够通过优化网站结构、关键词选择等方式提升网站的排名和曝光度.",
		},
		{
			img: img2,
			titleImg: swipperTitle4,
			title: "数据分析服务",
			disc: "能够对网站数据进行分析和评估,了解用户的行为和趋势, 用以为网站优化/改进提供数据支持.",
		},

		{
			img: img1,
			titleImg: swipperTitle5,
			title: "合作协调服务",
			disc: "专业团队,专属客服",
		},
	]);
	const swipperRef = ref();
	const curIndex = ref(3);
	const changeSwipper = (flag) => {
		if (flag === "left") {
			curIndex.value--;
			swipperRef.value.style.transition = "all .5s";
			swipperRef.value.style.left = -160 + (3 - curIndex.value) * 460 + "px";
			//点击时index自增
			if (curIndex.value <= 3) {
				curIndex.value = 3;
				setTimeout(() => {
					let last = carouselList.value.pop();
					carouselList.value.unshift(last)
					swipperRef.value.style.transition = "none";
					swipperRef.value.style.left = -160 + (3 - curIndex.value) * 460 + "px";
				}, 500); //定时器时间设置为500毫秒，与过渡时间相等
			}
		} else {
			curIndex.value++;
			swipperRef.value.style.transition = "all .5s";
			swipperRef.value.style.left = -160 + (3 - curIndex.value) * 460 + "px";
			if (curIndex.value >= carouselList.value.length - 2) {
				curIndex.value = carouselList.value.length - 2
				setTimeout(() => {
					let last = carouselList.value.shift();
					carouselList.value.push(last)
					swipperRef.value.style.left = -160 + (3 - curIndex.value) * 460 + "px";
					swipperRef.value.style.transition = "none";
				}, 500); //定时器时间设置为500毫秒，与过渡时间相等
			}
		}
		console.log(curIndex.value);
		console.log(swipperRef.value.style.left);
	};
	const lottieContainer = ref(null);
	const image = ref(null);
	const clickableBox = ref(null);
	let animationInstance = null;

	let isInner = false
	const startAnimation = () => {
		image.value.style.opacity = '0';
		lottieContainer.value.style.opacity = '1';
		if(!animationInstance){
			animationInstance = lottie.loadAnimation({
				container: lottieContainer.value,
				renderer: 'svg',
				loop: false,
				autoplay: true,
				animationData: animationData
			});
		}
		isInner = true
			animationInstance.playSegments([0, 60], true);
	};
    
	const stopAnimation = () => {
		if (animationInstance) {
			animationInstance.destroy(); // 销毁动画实例
		}

		image.value.style.opacity = '1';
		lottieContainer.value.style.opacity = '0';
	};

	const handleMouseEnter = () => {
		startAnimation();
	};

	const handleMouseLeave = () => {
		isInner = false
		animationInstance.addEventListener('complete', callback); // 监听动画播放完成事件
		animationInstance.playSegments([60, 113], true);
		
	};
	const callback = (e) => {
			if(!image.value)return;
		animationInstance.removeEventListener('complete', callback); // 监听动画播放完成事件
		if (!isInner) {
		image.value.style.opacity = '1';
		lottieContainer.value.style.opacity = '0';
		}
	}
</script>

<style lang="scss" scoped>
	.websiteIntermodalTransportation {
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;

		.aiseo-websiteIntermodalTransportation-main {
			width: 100%;
			background: #f5f5f5;
		}
	}

	.textBox {
		display: flex;
		justify-content: center;
		width: 100%;
		margin-top: 80px;

	}

	.textBoxTittle {
		width: $aiseoHomeWidth;
		display: flex;
		flex-direction: column;
		text-align: center;
		align-items: center;
	}

	.form-title {
		color: #1A1A1A;
		align-items: baseline;
		font-family: HelloFont WenYiHei, HelloFont WenYiHei;
		font-weight: bold;
		font-size: 32px;

		.customized-title {
			font-family: HelloFont WenYiHei;
			font-weight: 400;
			font-size: 48px;
		}

		.serve-title {
			font-family: HelloFont WenYiHei;
			font-weight: 400;
			font-size: 32px;
		}

		.Horizontal {
			width: 16px;
			height: 4px;
			background: #e62e3d;
		}
	}

	.image-list {
		width: 80%;
		display: flex;
		justify-content: center;

		// justify-content:space-around;
		.bosdwer {
			// flex: 1;
			position: relative;
			height: 340px;
			width: 294px;

			img {
				width: 294px;
				height: 340px;
				// margin: 0 40px;
				object-fit: cover
			}

			&+.bosdwer::before {
				content: "";
				display: inline-block;
				width: 2px;
				height: 40px;
				background: #cccccc;
				position: absolute;
				top: calc(50% - 20px);
				left: 0px;
			}
		}
	}

	.end-img {
		width: 60%;
		height: 80px;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}



	.simple {
		width: 100%;
		height: 959px;
		background: #2e2e2e;
		margin-top: 80px;
		padding-top: 80px;
		box-sizing: border-box;
		overflow: hidden;
		position: relative;
		z-index: 1;

		.title-img {
			width: $aiseoHomeWidth;
			margin: 0 auto;
			display: block;
		}

		.disc {
			width: $aiseoHomeWidth;
			font-family: Alibaba PuHuiTi-Regular;
			font-weight: 400;
			font-size: 16px;
			color: #e6e6e6;
			line-height: 32px;
			margin: 0 auto;
		}

		.swipper-content {
			max-width: 1920px;
    		margin: 0 auto;
			height: 879px;
			position: relative;
			overflow: hidden;
			&:hover {
				.swipper-arrow {
					display: block;
				}
			}

			.swipper-left-mask {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
				width: 480px;
				height: 879px;
				background: linear-gradient(90deg,
						#2e2e2e 0%,
						rgba(46, 46, 46, 0.6) 50%,
						rgba(46, 46, 46, 0) 100%);
			}

			.swipper-right-mask {
				position: absolute;
				right: 0;
				top: 0;
				z-index: 2;
				width: 480px;
				height: 879px;
				background: linear-gradient(90deg,
						rgba(46, 46, 46, 0) 0%,
						rgba(46, 46, 46, 0.6) 50%,
						#2e2e2e 100%);
			}

			.swipper-item-outer {
				display: flex;
				position: absolute;
				transition: all 0.3;

				.swipper-item {
					width: 400px;
					position: relative;

					&:hover {
						.logo-images {
							border: 2px solid #ffffff;
							border-radius: 15px;
							box-sizing: border-box;
						}

						.logo-img {
							.button-outer {
								opacity: 1;
								bottom: 40px;
								transition: all 0.3s ease;
								display: flex;
							}
						}

						.swipper-item-disc {
							color: #ffffff !important;
						}
					}

					&+.swipper-item {
						margin-left: 60px;
					}

					.logo-img {
						width: 400px;
						height: 600px;
						border-radius: 12px;
						position: relative;


						.button-outer {
							position: absolute;
							bottom: 0px;
							left: 50%;
							transform: translate(-50%);
							z-index: 3;
							width: 218px;
							height: 57px;
							border-radius: 30px;
							display: flex;
							opacity: 0;
							align-items: center;
							justify-content: center;
							transition: all 0.5s;
							box-sizing: border-box;

							.learn-more {
								width: 170px;
								height: 49px;
								border-radius: 29px;
								border: 2px solid #ffffff;
								background: none;
								font-weight: 300;
								font-size: 18px;
								color: #ffffff;
								transition: all 0.5s;
								box-sizing: border-box;
							}

							&:hover {
								border: 2px solid #e62e3d;
								padding: 2px;
								transition: all 0.5s;

								.learn-more {
									background: #e62e3d;
									border: none;
									width: 208px;
									transition: all 0.5s;
								}
							}
						}
					}

					.swipper-item-disc {
						font-size: 16px;
						color: #7C7C7C;
					}

					.title-img {
						height: 27px;
					}

					h3 {
						font-family: Alibaba PuHuiTi-Regular;
						font-weight: bold;
						font-size: 24px;
						line-height: 24px;
						color: #ffffff;
					}

					p {
						width: 300px;
						font-family: Alibaba PuHuiTi-Regular;
						font-weight: 400;
						font-size: 16px;
						color: #ffffff;
						line-height: 28px;
						margin-top: 16px;
					}
				}
			}

			.swipper-handle {
				width: 1000px;
				position: absolute;
				top: 290px;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				justify-content: space-between;
				z-index: 3;
			}

			.swipper-arrow {
				display: none;
				z-index: 3;
				font-size: 32px;
				line-height: 56px;
				text-align: center;
				color: #ffffff;
				cursor: pointer;
				border-radius: 12px 12px 12px 12px;
				border: 4px solid #ffffff;
				width: 56px;
				height: 56px;
				// position: absolute;
				// top: 290px;
				box-sizing: border-box;

				&:hover {
					border: 0;
					background: #e62e3d;
					line-height: 64px;
				}
			}
		}
	}

	.swipper-title-img {
		// width: 105px;
		height: 27px
	}
</style>